<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="26">
        <!-- 搜索框 -->
        <el-col :span="3">
          <el-input v-model="listQuery.name" placeholder="请输入用户昵称/活动名称" clearable></el-input>
        </el-col>
        <el-col :span="3.3">
          <datepicker ref="datepicker123"/>
        </el-col>
        <el-col  :span="4">
          <el-button type="primary" icon="el-icon-search" @click="searchActivity">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.user" label="所属用户">所属用户</el-checkbox>
      <el-checkbox v-model="formThead.shop" label="所属店铺">所属店铺</el-checkbox>
      <el-checkbox v-model="formThead.subject" label="招生科目">招生科目</el-checkbox>
      <el-checkbox v-model="formThead.contact_person" label="联系人">联系人</el-checkbox>
      <el-checkbox v-model="formThead.address" label="所属地区">所属地区</el-checkbox>
      <el-checkbox v-model="formThead.release_time" label="发布时间">发布时间</el-checkbox>
      <el-checkbox v-model="formThead.admission_time" label="参加人数">招生时间</el-checkbox>
      <el-checkbox v-model="formThead.enrollment_goals" label="活动图片">招生目标</el-checkbox>
      <el-checkbox v-model="formThead.established" label="活动开始时间">机构成立时间</el-checkbox>
    </div>

    <el-table :data="admissionsList" style="width: 98%;margin: 10px auto 0" border :key="admissionsList.length" class="table" v-loading="loading" element-loading-text="拼命加载中....">

      <el-table-column label="所属用户" align="center" v-if="formThead.user">
        <template slot-scope="{row}" >
          <span>{{row.nickName}}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属店铺" align="center" v-if="formThead.shop">
        <template slot-scope="{row}">
          <span>{{row.store_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="招生科目" align="center" v-if="formThead.subject">
        <template slot-scope="{row}">
          <span>{{row.subjects_name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系人" align="center" v-if="formThead.contact_person">
        <template slot-scope="{row}">
          <span>{{row.contact}}</span>
        </template>
      </el-table-column>

      <el-table-column label="所属地区" align="center" v-if="formThead.address">
        <template slot-scope="{row}">
          <span>{{row.area}}</span>
        </template>
      </el-table-column>

      <el-table-column label="发布时间" align="center" v-if="formThead.release_time">
        <template slot-scope="{row}">
          <span>{{newtime(row.create_time)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="招生时间" align="center" v-if="formThead.admission_time">
        <template slot-scope="{row}">
          <i class="el-icon-time"></i>
          <span>{{newtime(row.needs_time)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="招生目标" align="center" v-if="formThead.enrollment_goals">
        <template slot-scope="{row}">
          <span>{{row.needs_num}}</span>
        </template>
      </el-table-column>

      <el-table-column label="机构成立时间" align="center" v-if="formThead.established">
        <template slot-scope="{row}">
          <span>{{row.store_set_time}}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系电话" align="center" v-if="formThead.established">
        <template slot-scope="{row}">
          <span>{{row.phone}}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" @click="opendetail(row.detail)">查看</el-button>
          <el-dialog
            title="备注信息"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <span>{{detail}}</span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>

      <el-table-column label="对接状态" align="center">
        <template slot-scope="{row,index}">
          <el-checkbox v-model="row.docking" @change="Changestate(row.id,1,row.docking_status,index)"></el-checkbox>
          <!-- <el-checkbox v-model="oo" @change="abc(oo)"></el-checkbox> -->
        </template>
      </el-table-column>

      <el-table-column label="招生状态" align="center">
        <template slot-scope="{row,index}">
          <el-checkbox v-model="row.enrollment" @change="Changestate(row.id,2,row.enrollment_status,index)"></el-checkbox>
        </template>
      </el-table-column>

    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.listQuery.page-1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="this.listQuery.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.listQuery.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
  import store from '@/store'
  import {list, del, edit} from '@/api/thk/activity'
  import {list as getCustomerList} from '@/api/thk/customer'
  import {list as getStoreList} from '@/api/thk/store'
  import {getActivityPerformance} from '@/api/thk/performance'
  import datepicker from './datepicke'
  import {getlist,detail} from '@/api/thk/admissionsrequirements'


  export default {
    name: 'activity',
    components: {
      datepicker
    },
    data() {
      return {
        // save storeList field
        admissionsList: [],
        bigImageSrc: null,
        dialogVisible: false,
        customerList: [],
        storeList: [],
        detail:"",
        formThead: {
          user:true,
          shop:true,
          subject:true,
          contact_person:true,
          address:true,
          release_time:true,
          admission_time:true,
          enrollment_goals:true,
          established:true
        },

        listQuery: {
          name: undefined,
          detail:undefined,
          time: null,
          page: 1,
          pagesize: 10,
          create_time:'',
          time1:''
        },

        loading: true,
        total: 0,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        value1: ''
      }
    },

    // created生命周期中调用获取活动列表方法
    created() {
        const token=store.getters.token
        this.getadmissionsList()
        this.loading=false
    },

    updated() {
      // this.$nextTick(function(){
      //   this.loading = false
      // })
    },

    methods: {
      newtime(num){
        const str=new Date(num*1000).toLocaleString()
        return str;
      },
      handleSizeChange(val) {
        this.listQuery.pagesize = parseInt(val)
        this.getadmissionsList()
      },
      handleCurrentChange(val) {
        console.log(val)
        this.listQuery.page = parseInt(val)
        this.getadmissionsList()
      },
      searchActivity(){
        const token=store.getters.token
        console.log(token)
        this.gettimes(this.$refs.datepicker123.value1)
        this.getadmissionsList()
      },
      getadmissionsList(){
        const token=store.getters.token
        getlist(token,this.listQuery.name,this.listQuery.create_time,1,this.listQuery.pagesize).then(res=>{
            console.log(res)
            const ress=res.data.data.data
            this.listQuery.total=parseInt(res.data.data.total)
            for(let i=0;i<ress.length;i++){
              ress[i].time=this.newtime(ress[i].create_time)
              if(ress[i].docking_status===1){
                ress[i].docking=true
              }else{
                ress[i].docking=false
              }
              if(ress[i].enrollment_status===1){
                ress[i].enrollment=true
              }else{
                ress[i].enrollment=false
              }
            }
            if(this.listQuery.name!='' && this.listQuery.time!=''){
              this.admissionsList=ress.filter(item=>{
                if(item.time.match(this.listQuery.time1)){
                  return item
                }
              })
            }else{
              this.admissionsList=ress
            }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      opendetail(detail){
        if(detail!=''){
          this.detail=detail
        }else{
          this.detail="用户没有填写备注信息"
        }
        this.dialogVisible=true
      },
      gettimes(shijian){
        console.log(shijian,"9527")
        if(shijian!=''){
          const time=new Date(shijian)
          let oo=parseInt(time.getMonth())+1
          let day=parseInt(time.getDate())
          let dateof=String(time.getFullYear()+"/"+oo+"/"+day)
          this.listQuery.time1=dateof
          console.log(this.listQuery.time1,"8957")
        }
      },
      Changestate(id,type,status,index){
        const token=store.getters.token
        detail(token,id,type,status).then(res=>{
          console.log(res)
          console.log("123")
          if(this.listQuery.name!='' || this.listQuery.time1!=''){
            this.searchActivity()
          }
        })
        // type===1 ? this.admissionsList[index].docking=!this.admissionsList[index].docking : this.admissionsList[index].enrollment=!this.admissionsList[index].enrollment
      }
    },
  }
</script>

<style scoped>

</style>

